<template>
  <div class="header">
    <el-row>
      <el-col class="back" :span="4">
        <div class="container">
          <svg @click="back" class="icon" aria-hidden="true">
            <use xlink:href="#iconfanhui" />
          </svg>
        </div>
      </el-col>
      <el-col :span="16"></el-col>
      <el-col :span="4">
        <div class="container">
          <el-avatar class="avatar" shape="square" :size="40" :src="avatar"></el-avatar>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { Avatar } from "element-ui";
import { Row, Col } from "element-ui";

export default {
  components: {
    ElRow: Row,
    ElCol: Col,
    ElAvatar: Avatar
  },
  computed: {
    avatar() {
      return this.$store.state.teacher.userImg;
    }
  },
  methods: {
    back() {
      window.history.go(-1);
    }
  }
};
</script>
<style lang="scss" scoped>
.header {
  width: 100%;
  height: 100%;
  .back {
    .icon {
      width: 30px;
      height: 30px;
    }
  }
  .el-row {
    width: 100%;
    height: 100%;
    .el-col {
      height: 100%;
      .container {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
</style>